<template>
  <div class="p-6">
    <!-- 标题 -->
    <div class="main-header">
      <h2 class="main-title">学生信息管理</h2>
    </div>

    <!-- 搜索框 -->
    <div class="search-box">
      <el-input
          v-model="search"
          placeholder="搜索学生姓名、学号或邮箱..."
          clearable
          prefix-icon="Search"
          style="width: 300px"
      />
      <el-button type="primary" @click="handleAdd" >
        <el-icon><Plus /></el-icon> 添加学生
      </el-button>
    </div>

    <div class="student-box">
    <!-- 学生表格 -->
    <el-table :data="filteredStudents" border stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="studentId" label="学号" />
      <el-table-column prop="major" label="专业" />
      <el-table-column prop="grade" label="年级" />
      <el-table-column prop="gpa" label="GPA" />
      <el-table-column prop="mbti" label="MBTI" />
      <el-table-column prop="status" label="状态" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button
              type="primary"
              size="small"
              icon="View"
              @click="viewStudent(row)"
          />
          <el-button
              type="warning"
              size="small"
              icon="Edit"
              @click="editStudent(row)"
          />
          <el-button
              type="danger"
              size="small"
              icon="Delete"
              @click="deleteStudent(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    </div>


    <!-- 学生详情弹窗 -->
    <el-dialog v-model="showDetail" width="600px" title="学生详细信息">
      <el-tabs v-model="activeTab">
        <!-- 学业情况 -->
        <el-tab-pane label="学业情况" name="study">
          <p><b>姓名：</b>{{ selected.name }}</p>
          <p><b>学号：</b>{{ selected.studentId }}</p>
          <p><b>专业：</b>{{ selected.major }}</p>
          <p><b>年级：</b>{{ selected.grade }}</p>
          <p><b>GPA：</b>{{ selected.gpa }}</p>
        </el-tab-pane>

        <!-- MBTI档案 -->
        <el-tab-pane label="MBTI档案" name="mbti">
          <p><b>类型：</b>{{ selected.mbti }}</p>
          <p>优点：独立思考、规划性强</p>
          <p>不足：过于理论化、社交能力有限</p>
        </el-tab-pane>

        <!-- 个人信息 -->
        <el-tab-pane label="个人信息" name="info">
          <p><b>邮箱：</b>{{ selected.email }}</p>
          <p><b>电话：</b>{{ selected.phone }}</p>
          <p><b>地址：</b>{{ selected.address }}</p>
          <p><b>紧急联系人：</b>{{ selected.guardian }} - {{ selected.guardianPhone }}</p>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 编辑学生弹窗 -->
    <el-dialog class="edit-box" v-model="showEdit" width="600px" title="编辑学生信息">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="editForm.studentId" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="editForm.major" />
        </el-form-item>
        <el-form-item label="年级">
          <el-select v-model="editForm.grade">
            <el-option label="大一" value="大一" />
            <el-option label="大二" value="大二" />
            <el-option label="大三" value="大三" />
            <el-option label="大四" value="大四" />
            <el-option label="研一" value="研一" />
            <el-option label="研二" value="研二" />
          </el-select>
        </el-form-item>
        <el-form-item label="GPA">
          <el-input v-model="editForm.gpa" />
        </el-form-item>
        <el-form-item label="MBTI">
          <el-select v-model="editForm.mbti">
            <el-option label="INTJ" value="INTJ" />
            <el-option label="ENFP" value="ENFP" />
            <el-option label="ISTJ" value="ISTJ" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEdit = false">取消</el-button>
        <el-button type="primary" @click="saveStudent">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import { Plus, Search, View, Edit, Delete } from "@element-plus/icons-vue";

// 初始学生数据
const students = ref([
  {
    id: 1,
    name: "张三",
    studentId: "CS2021001",
    major: "计算机科学与技术",
    grade: "大三",
    gpa: 3.8,
    mbti: "INTJ",
    status: "在读",
    email: "zhangsan@university.edu",
    phone: "13800138001",
    address: "北京市海淀区",
    guardian: "张父",
    guardianPhone: "13900139001",
  },
  {
    id: 2,
    name: "李四",
    studentId: "CS2021002",
    major: "软件工程",
    grade: "大二",
    gpa: 3.5,
    mbti: "ENFP",
    status: "在读",
    email: "lisi@university.edu",
    phone: "13800138002",
    address: "上海市徐汇区",
    guardian: "李母",
    guardianPhone: "13888888888",
  },
  {
    id: 3,
    name: "王五",
    studentId: "CS2021003",
    major: "计算机科学",
    grade: "大一",
    gpa: 3.2,
    mbti: "ISTJ",
    status: "在读",
    email: "wangwu@university.edu",
    phone: "13800138003",
    address: "广东省深圳市",
    guardian: "王父",
    guardianPhone: "13888888889",
     },
    {
      id: 4,
      name: "赵六",
      studentId: "CS2021004",
      major: "软件工程",
      grade: "研二",
      gpa: 3.9,
      mbti: "INTJ",
      status: "在读",
      email: "zhaoliu@university.edu",
      phone: "13800138004",
      address: "广东省深圳市",
      guardian: "赵父",
    },
]);

const search = ref("");
const showDetail = ref(false);
const showEdit = ref(false);
const activeTab = ref("study");
const selected = ref({});
const editForm = ref({});

// 搜索过滤
const filteredStudents = computed(() => {
  return students.value.filter(
      (s) =>
          s.name.includes(search.value) ||
          s.studentId.includes(search.value) ||
          s.email.includes(search.value)
  );
});

// 查看详情
const viewStudent = (row) => {
  selected.value = row;
  activeTab.value = "study";
  showDetail.value = true;
};

// 编辑学生
const editStudent = (row) => {
  editForm.value = { ...row };
  showEdit.value = true;
};

// 保存学生
const saveStudent = () => {
  const index = students.value.findIndex((s) => s.id === editForm.value.id);
  if (index !== -1) {
    students.value[index] = { ...editForm.value };
    ElMessage.success("保存成功！");
  }
  showEdit.value = false;
};

// 删除学生
const deleteStudent = (id) => {
  students.value = students.value.filter((s) => s.id !== id);
  ElMessage.success("删除成功！");
};

// 添加学生
const handleAdd = () => {
  const newStudent = {
    id: Date.now(),
    name: "新学生",
    studentId: "NEW2023001",
    major: "待定",
    grade: "大一",
    gpa: 0,
    mbti: "未测",
    status: "在读",
    email: "new@university.edu",
    phone: "",
    address: "",
    guardian: "",
    guardianPhone: "",
  };
  students.value.push(newStudent);
  ElMessage.success("添加成功！");
};
</script>

<style scoped>
.p-6 {
  padding: 20px;
}
.main-header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.main-title {
  font-size: 25px;
  font-weight: bold;
}
.student-box{
  margin-top: 20px;
}

</style>
